<#compress>
<!DOCTYPE html>
<html>
<head>
<title>发送重置邮件</title>
<meta name="keywords" content="login">
<meta name="description" content="login">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<#include "/admin/include/bootstrap.ftl">
<style type="text/css">
login-page {
	background-color: #e5e7ed;
	min-height: 100vh;
}
.login-page main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    max-width: 460px;
}
.login-block {
    background-color: #fff;
    padding: 60px;
    box-shadow: 0 3px 50px 0 rgba(0,0,0,.1);
    text-align: center;
    border-radius: 5px;
}
.login-block h1 {
    font-size: 16px;
    margin-bottom: 40px;
    margin-top: 40px;
    font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
    color:gray;
}
.login-links {
    padding: 15px 5px 0;
    font-size: 13px;
    color: #96a2b2;
}
.chklab{color:gray;cursor: pointer;font-size: 12px;font-weight: normal;display:inline; }
.btn {
    line-height: 42px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 3px;
    border-color: #9e7dd3;
    padding: 0 30px;
    color: #fff;
    background-color: #9e7dd3;
    transition: all .4s ease;
}
</style>
</head>

<body class="login-page" style="background-color:#e5e7ed">
	<main>
	<div class="login-block">
		<a href="http://51so.info"><img	src="http://51so.info/www/admin/img/logo.png" width="144px" class="img-circle"height="144px" alt="51so" data-toggle="tooltip" data-placement="bottom" title="51so一家专业做个人资料整理的网站 ~"></a>
		<h1><#if msg??><span style="color:red;">${msg}</span><#else>输入邮箱地址重置密码</#if></h1>
		<form action="" method="post" role="form" id="resetForm">
			<div class="form-group">
				<div class="input-group">
					<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
					<input  class="form-control" name="email" required  type="email" value="${email!}"
						placeholder="邮箱">
				</div>
			</div>
			<hr class="hr-xs">
			<div class="form-group">
				<div class="input-group">
					<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span> <input
						type="text" class="form-control" 
						placeholder="输入下方验证码"   name="vcode" >
				</div>
			</div>
			<div class="form-group">
				<div class="input-group" style="margin: 0 auto;">
					<img class="verifyimg reloadverify" alt="点击切换" data-toggle="tooltip" data-placement="bottom" title="看不清换一张，请单击我。"
						src="vcode.do" style="cursor:pointer;" onclick="reloadVcode(this);">
				</div>
			</div>
			<button class="btn btn-block" type="submit"><i class="glyphicon glyphicon-send"></i> 发送邮件</button>
		</form>
	</div>
	</main>
</body>
<script type="text/javascript">
	$(function() {
		$("[data-toggle='tooltip']").tooltip();
	});
	function reloadVcode(obj) {
		obj.src = 'vcode.do?' + Date.parse(new Date());
	}
	$('#resetForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            email: {
                validators: {
                    emailAddress: {
                        message: '邮箱格式不正确！'
                    }
                }
            },
            vcode: {
	               validators: {
	                   notEmpty: {
	                       message: '请输入下方验证码！'
	                   },stringLength: {
	                       min: 4,
	                       max: 4,
	                       message: '验证码为固定4位'
	                   }
	               }
	           }
        }
    });
</script>
</html>
</#compress>
